<template>
	<view>
		<view class="contact-box" @click="handleFeedback">
			联系我们
		</view>
		<view id="customNav" class="custom-nav" :style="{ height: navHeight, paddingTop: statusBarHeight }">
			<view class="title">
				{{ $store.state.configInfo?.title }}
			</view>
		</view>
		<view class="content" :style="{ paddingTop: contentHeight + 'px' }">
			<up-swiper bgColor="#ffffff" :list="data.banner" keyName="ImgUrl" previousMargin="32" nextMargin="32" circular
				autoplay radius="12" @click="handleDetails(data.banner[$event].AlbumId)"></up-swiper>
		</view>
		<view class="notice">
			<up-notice-bar text="所有素材均来源于网络,如有侵权,请联系我们及时处理!"></up-notice-bar>
		</view>

		<view class="album">
			<view class="album-title">
				<text class="left">热门专辑</text>
				<view class="right" @click="handleAlbum">
					<text>更多</text>
					<up-icon name="arrow-right" size="13"></up-icon>
				</view>
			</view>
			<view class="album-box">
				<view class="album-box-item" v-for="(item, index) in data.Albums" :key="index"
					@click="handleDetails(item.AlbumID)">
					<image :src="item.ImgUrl" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<up-sticky bgColor="#fff" :offsetTop="contentHeight">
			<up-tabs lineColor="#e26788" :list="data.navigations" keyName="CategoryName" @click="handleClick"></up-tabs>
		</up-sticky>
		<view class="imgs-box">
			<template v-for="(item, index) in imglist" :key="index">
				<image class="img-item" :src="item.ThumbImage" mode="widthFix" @click="changeImage(item)" />
				<view v-if="(index + 1) % 8 === 0" class="box-id">
					<ad-custom :unit-id="$store.state.configInfo.adIds.nativeAd1"></ad-custom>
				</view>
			</template>
		</view>
		<up-loadmore class="loadmore" :status="hasMore ? 'loading' : 'nomore'" />
	</view>
</template>
<script>
	const http = uniCloud.importObject("wallpaper", {
		customUI: true
	})
	export default {
		data() {
			return {
				navHeight: "",
				statusBarHeight: "",
				contentHeight: "",
				data: '',
				pageindex: 0,
				categoryID: undefined,
				imglist: [],
				hasMore: true
			}
		},
		watch: {
			"$store.state.configInfo"(val) {
				// #ifdef MP-WEIXIN
				// 获取系统信息
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#customNav')
					.boundingClientRect((rect) => {
						this.contentHeight = rect.height;
					})
					.exec();
				// #endif
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = `${systemInfo.statusBarHeight}px`; // 状态栏高度
			// 获取胶囊按钮信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 计算导航栏高度（胶囊底部 + 10px）
			this.navHeight = `${menuButtonInfo.height + 10}px`;

			const query = uni.createSelectorQuery().in(this);
			query
				.select('#customNav')
				.boundingClientRect((rect) => {
					this.contentHeight = rect.height;
				})
				.exec();
			// #endif
			this.init()
		},
		onReachBottom() {
			this.pageindex++
			this.getImages()
		},
		methods: {
			async init() {
				const res = await http.getInit()
				if (res.code === 200) {
					this.data = res.data
					this.handleClick(this.data.navigations[0])
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
				}
			},
			handleClick(item) {
				this.categoryID = item.CategoryID
				this.imglist = []
				this.pageindex = 0
				this.hasMore = true
				this.getImages()
			},
			async getImages() {
				if (!this.hasMore) return
				const params = {
					pageindex: this.pageindex,
					pagesize: 30,
					categoryID: this.categoryID,
				}
				const res = await http.getImages(params)
				if (res.code === 200) {
					this.imglist = this.imglist.concat(res.data)
					if (res.data.length < 30) {
						this.hasMore = false
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
				}
			},
			handleAlbum() {
				uni.navigateTo({
					url: "/pages/Album/Album"
				})
			},
			changeImage(item) {
				uni.navigateTo({
					url: `/pages/preview/preview?src=${item.Image}`
				})
			},
			handleDetails(AlbumID) {
				uni.navigateTo({
					url: `/pages/Album/AlbumDetails?id=${AlbumID}`,
				});
			},
			handleFeedback() {
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contact-box {
		position: fixed;
		right: 0;
		top: 350rpx;
		// #B2C5FF #C894DA
		background-image: linear-gradient(to bottom right, #FE73DA, #FF9056);
		color: #fff;
		z-index: 999;
		writing-mode: vertical-rl;
		padding: 24rpx 8rpx;
		border-top-left-radius: 12rpx;
		border-bottom-left-radius: 12rpx;
	}

	.custom-nav {
		padding: 24rpx 32rpx;
		background-image: url(https://mp-32c47a9d-2e65-407a-9068-079739b79125.cdn.bspapp.com/images/wallpaper-topBgc.jpg);
		background-size: 100% 100%;
		// border-bottom: 2rpx solid #d5d5d5;
		display: flex;
		align-items: center;
		// position: relative;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
		// left: 0;

		.title {
			//	height: 84rpx;
			font-size: 42rpx;
			color: #fff;
		}
	}

	.content {
		margin: 32rpx 0;
	}


	.notice {
		margin: 32rpx;
		box-sizing: border-box;
		border-radius: 999rpx;
		overflow: hidden;
	}

	.album {
		padding: 0 32rpx;

		.album-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				font-size: 32rpx;
				font-weight: bold;
			}

			.right {
				font-size: 28rpx;
				color: #949494;
				display: flex;
				align-items: center;
			}
		}

		.album-box {
			display: flex;
			gap: 24rpx;
			margin-top: 24rpx;

			.album-box-item {
				flex: 1;
				border-radius: 24rpx;
				overflow: hidden;


				image {
					display: block;
					width: 100%;
				}
			}
		}
	}

	.imgs-box {
		margin: 32rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12rpx;

		.img-item {
			width: 100%;
			display: block;
			border-radius: 12rpx;
		}

		.box-id {
			grid-column: 1 / -1;
		}
	}

	.loadmore {
		padding-bottom: 32rpx;
	}
</style>